<template>
    <div> 
         <h1>显示房型信息</h1>

    </div>
    <a href="/loin">登录页面</a>

     房型名称:
     <input type="text" v-model="teea.name">

     房型最大:
     <input type="text" v-model="teea.maxstareMax">
       房型最小:
     <input type="text" v-model="teea.minstareMax">

    <input type="button" value="查询" @click="steey()">
     <table class="table">
     <thead>
        <tr>
            <td>房型名称</td>
            <td>可住人数</td>
            <td>房型大小</td>
            <td>图片</td>
            <td>备注</td>
            <td>居住时间</td>
            <td>是否加床</td>
            <td>房号</td>
             <td>操作</td>
        </tr>
     </thead>
      <tbody>
        <tr v-for="a in data">

            <td>{{a.stareName}}</td>
            <td>{{a.num}}</td>
            <td>{{a.stareMax}}</td>
            <td><img style="width:45px;height:45px" :src="axios.defaults.baseURL+a.stareImg"></td>
            <td>{{a.stareType}}</td>
            <td>{{moment(a.stareDate).format("yyyy-MM-DD") }}</td>
            <td>{{a.state==true?"不需要":"需要"}}</td>
                <td>{{a.starePteaName}}</td>
        
        </tr>
     </tbody>
     </table>
     一共{{teea.count}}条,每页显示{{teea.size}}条,共{{teea.mumber}}页,当前{{teea.index}}页 
     <input type="button" value="首页" @click="pang(1)">
       <input type="button" value="上一页" @click="pang(2)">

     <input type="button"  v-for="h in teea.mubmre" :value="p" @click="yews(p)">

        <input type="button" value="下一页" @click="pang(3)">
         <input type="button" value="尾页" @click="pang(4)">

       <input type="mubmre" style="width:45px;height:45px" v-model="teea.index"><input type="button" value="跳转" @click="te()">
        <select v-model="teea.size" @change="yete">
             <option value="1">1</option>    
              <option value="2">2</option>   
               <option value="3">3</option>   
                <option value="4">4</option>   
        </select>

</template>

<script setup lang="ts">
  import axios from 'axios';
  import{ref,onMounted} from 'vue';
 import {useRouter} from 'vue-router';
   import moment from 'moment'
   const router=useRouter();
onMounted(()=>{
  teea.value.index=1;
     ShowStare();
}) 



 const yews=(val:any)=>{

      teea.value.index==val;


 }

  const click=()=>{

       teea.value.index=1;
       ShowStare();

  }
 const pang=(val:any)=>{
   if(val==1){
      teea.value.index;
      ShowStare();
   }
     if(val==2&&teea.value.index>1){
      teea.value.index--;
      ShowStare();
   }
     if(val==3&&teea.value.index<teea.value.mumber){
      teea.value.index++;
      ShowStare();
   }
     if(val==4){
     teea.value.index=teea.value.mumber
     ShowStare();
   }

 }



  const te=(val:any)=>{
     if(teea.value.index>1&&teea.value.index<=teea.value.count){
         ShowStare();
     }else{
   teea.value.index=1;
     }

  }

  const yete=()=>{
    
  teea.value.index=1;

       ShowStare();
        
  }




const data=ref([{

  "stareId": 4,
      "stareName": "双人房",
      "stareDate": "2020-02-06T00:00:00",
      "stareType": "好看",
      "stareMax": 200,
      "state": true,
      "num": 3,
      "stareImg": "/pic/c0774279-36af-4b35-b442-aa2ad708aba14.png",
      "starePteaName": "101",
      "starePteaId": 2
}])

//查询

 const steey=()=>{

 teea.value.index==1;

    ShowStare();


 }
  
   const teea=ref({
     name:"",
     maxstareMax:0,
     minstareMax:0,
     index:1,
     size:2,
     count:0,
     mumber:0,


   })

   
const ShowStare=()=>{
     axios.get("https://localhost:7295/api/Stare/ShowStare",{params:teea.value}).then(res=>{
     data.value=res.data.mumber;
     teea.value.count=res.data.count;
      teea.value.mumber=Math.ceil(teea.value.count/teea.value.size)

     })

}


</script>

<style scoped>

</style>